<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: { type: Number, required: true },
    total: { type: Number, required: true },
    color: { type: String, default: "#ffffff" },
    backgroundColor: { type: String, default: "rgba(255, 255, 255, 0.3)" },
    size: { type: String, default: "8rpx" },
    space: { type: String, default: "10rpx" },
  },
});
</script>

<template>
  <view class="swipe-dot" :style="{ fontSize: size }">
    <template v-for="(i, d) of total" :key="i">
      <view
        class="swipe-dot-space"
        v-if="d !== 0"
        :style="{ width: space }"
      ></view>
      <view
        class="swipe-dot-item"
        :style="{
          width: modelValue === d ? '2em' : '',
          backgroundColor: modelValue === d ? color : backgroundColor,
        }"
      ></view>
    </template>
  </view>
</template>

<style lang="scss">
.swipe-dot {
  display: flex;
  justify-content: center;
  align-items: center;

  .swipe-dot-space,
  .swipe-dot-item {
    height: 1em;
  }

  .swipe-dot-item {
    width: 1em;
    border-radius: 0.5em;
    transition: all 0.3s ease-out;
  }
}
</style>